<template>
  <el-pagination
    background
    layout="total, sizes, prev, pager, next"
    v-model:currentPage="page"
    v-model:page-size="limit"
    :total="total"
    :page-sizes="[3, 4, 10, 20, 30, 50, 100]"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script>
import { inject, reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
    })

    const total = inject('total')
    const limit = inject('limit')
    const page = inject('page')
    const getData = inject('getData')

    const handleSizeChange = () => {
      getData(limit.value, page.value)
    }
    const handleCurrentChange = () => {
      getData(limit.value, page.value)
    }

    return {
      total,
      limit,
      page,
      handleSizeChange,
      handleCurrentChange,
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped></style>
